<template>
  <Echart
      :options="options"
      id="centreLeft1Chart"
      height="300px"
      width="400px"
  ></Echart>
</template>
<script>


import Echart from "../../common/echart";
export default {
  name: "BarEchar",
  components: {Echart},
  props: ['title', 'entext'],
  data() {
    return {
      options:''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      let colorList = [
        {
          colorStart: '#488BFF',
          colorEnd: '#9abffd'
        },
        {
          colorStart: '#8bf2f1',
          colorEnd: '#7de1e1'
        },
        {
          colorStart: '#f3ba8d',
          colorEnd: '#ed7c40'
        },
        {
          colorStart: '#f7d58d',
          colorEnd: '#f8d48a'
        },
        {
          colorStart: '#99a9fa',
          colorEnd: '#91a1f7'
        },
        {
          colorStart: '#68d597',
          colorEnd: '#92f0d8'
        },
        {
          colorStart: '#526cf5',
          colorEnd: '#8391f4'
        }
      ]
      let PieData = [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 274, name: 'Union Ads' },
        { value: 235, name: 'Video Ads' },
        { value: 400, name: 'Search Engine' }
      ]
      this.options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        series: [

          {
            left: '0%',
            name: '领域：',
            type: 'pie',
            animation: false,
            hoverAnimation:false,
            radius: '70%',
            labelLine: {
              length: 10,
              length2: '150'
            },
            itemStyle: {
              normal: {
                borderColor: '#FFFFFF', borderWidth: 2,
                color: (list) => {
                  colorList
                  return new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[list.dataIndex]['colorStart']
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]['colorEnd']
                    }
                  ])
                }
              }
            },
            label: {
              padding: [-50, -120, 5, -160],
              textStyle: {
                fontFamily: 'TextBlack'
              },
              // lineHeight:0,
              formatter: function(params) {
                // 将标签文字按照适当的位置进行换行
                var newParamsName = ''
                var paramsNameNumber = params.name.length
                var provideNumber = 6  // 每行能显示的字的个数
                // 根据每行能显示的字数，计算出标签文字需要换行的次数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                // 如果换行，则每行显示的文字数需要根据字数进行调整
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    // 每行最后一次不换行
                    if (p === rowNumber - 1) {
                      tempStr = params.name.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.name.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params.name
                }
                // 返回的格式，根据具体的业务需求确定
                return newParamsName
              }

            },
            labelLayout: {
              verticalAlign: 'bottom'
            },
            data: PieData.map((item, index) => {
              item.label = {
                color: colorList[index].colorStart,
                fontSize: '12',
                fontWeight: 'bolder'
              }
              item.name = item.name +' '+item.value +'%'
              return item
            })

          }
        ]
      }

    }
  }
}
</script>
<style lang="scss" scoped>

</style>


